<script setup>
import {ref} from 'vue'

const msg = ref('parent')
const name = ref('')
const age = ref()
const users = ref([
  {id: 1, name: '李四', age: 20},
  {id: 2, name: '张三丰', age: 21},
  {id: 3, name: '赵勇', age: 22},
])

const book = ref({
  id: 100,
  name: '《java入门实战》',
  price: 30,
  author: 'james',
  show:function(){
    console.log('show')
  }
})

function del(index) {
  users.value.splice(index, 1)
}

function add() {
  users.value.push({id: users.value.length + 1, name: name.value, age: age.value})
  //console.log(name.value)
  //console.log(age.value)
  name.value = ''
  age.value = ''
}
</script>

<template>
  <label><input type="text" v-model="name"></label><br>
  <label><input type="text" v-model="age"></label><br>
  <input type="submit" @click="add" value="add student">
  <hr>
  <!-- v-for循环数组（元素是对象）index索引号 -->
  <p v-for="({name,id,age},index) in users">{{ name }}{{ age }}{{ id }}===={{ index }}
    <button @click="del(index)">删除</button>
  </p>
  <hr>
  <p v-for="item in users">{{ msg }}{{ item.id }}{{ item.name }}{{ item.age }}</p>
  <hr>
  <p v-for="(item,index) in users" :style="{color:index%2===0 ? 'red':'#000'}">{{ msg }}{{ item.id }}{{ item.name }}{{ item.age }} --- {{ index }}</p>
  <hr>
  <!-- v-for 循环对象 index是属性名 -->
  <p v-for="item in book">{{item}}</p>
  <p v-for="(item,key) in book">{{item}}{{key}}</p>
  <p v-for="item of book">{{item}}</p>

  <!-- key==='show' ? item() : item -->
  <p v-for="(item,key) of book">{{key==='show'?item():item}}{{key}}</p>

  <p v-for="(item,key,index) of book">{{index}}{{key==='show'?item():item}}{{key}}</p>
</template>

<style scoped>

</style>
